<template>
  <el-form label-width="200px" style="padding-top: 20px;" @submit.native.prevent="apiSubmit">
    <el-form-item v-for="(oRow, sName) in apiResData.form_item_list" :key="sName" :label="oRow.title" :prop="sName">
      <el-input
        v-if="oRow.type==='label'"
        v-model="oRow.value"
        :disabled="loading"
        style="width: 500px;"
        :readonly="true"
      >
        <i v-if="oRow.suffix" slot="suffix" style="font-style:normal;margin-right: 10px;">{{oRow.suffix}}</i>
      </el-input>
      <el-input
        v-if="oRow.type==='text'"
        v-model="oRow.value"
        :placeholder="'请输入【'+oRow.title+'】'"
        :disabled="loading"
        style="width: 500px;"
      />
      <el-input
        v-if="oRow.type==='textarea'"
        v-model="oRow.value"
        type="textarea"
        :rows="oRow.rows"
        :disabled="loading"
        style="width: 500px;"
      ></el-input>
      <el-radio-group v-else-if="oRow.type==='radio'" v-model="oRow.value" :disabled="loading">
        <el-radio v-for="(value,name) in oRow.option" :key="name" :label="name">{{value}}</el-radio>
      </el-radio-group>
      <span v-if="oRow.note" style="color: #999999; padding-left: 30px;">{{oRow.note}}</span>
      <a v-if="oRow.link" style="padding-left: 30px;" :href="oRow.link.href" target="_blank">{{oRow.link.title}}</a>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :disabled="loading" @click="apiSubmit">确定充值</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      apiResData: {},
      apiReqQuery: {}
    };
  },
  computed: {
    loading() {
      // 如处于加载中，应显示遮罩层
      return this.$store.getters.apiLoading;
    }
  },
  created() {
    this.apiGet();
  },
  methods: {
    apiGet() {
      this.$emit("create"); // for test
      this.api("rgdc/deposit:get", this.apiReqQuery).then(res => {
        this.apiResData = res;
      });
    },
    /* 确定充值按钮 */
    apiSubmit() {
      const reqData = {};
      for (var sName in this.apiResData.form_item_list) {
        const oRow = this.apiResData.form_item_list[sName];
        if (oRow.type === 'label') {
          continue;
        }
        reqData[sName] = oRow.value;
      }
      this.api("rgdc/deposit:post", reqData).then(response => {
        this.apiGet();
      });
    },
    /** 重置按钮操作 */
    resetForm() {
      this.apiGet();
    }
  }
};
</script>
